<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <!-- 订单状态 -->
      <div class="dialog-panel">
        <div class="dialog-panel-title">订单状态</div>
        <el-steps v-if="info.sts < 6" :active="info.sts" finish-status="success" align-center>
          <el-step title="待付款"></el-step>
          <el-step title="已完成"></el-step>
          <el-step title="线下沟通"></el-step>
          <el-step title="初步方案确定"></el-step>
          <el-step title="方案完成"></el-step>
        </el-steps>
        <el-steps v-else-if="info.sts === 6" :active="0" finish-status="success" align-center>
          <el-step title="已取消"></el-step>
        </el-steps>
        <el-steps v-else-if="info.sts === 7" :active="0" finish-status="success" align-center>
          <el-step title="已失效"></el-step>
        </el-steps>
      </div>
      <!-- 订单详情 -->
      <div class="dialog-panel">
        <div class="dialog-panel-title">订单详情</div>
        <div class="info">
          <div class="info-col">
            <div class="item">
              <div class="label">用户名:</div>
              <div class="value">{{ info.pay_user_name }}</div>
            </div>
            <div class="item">
              <div class="label">公司名称:</div>
              <div class="value">{{ info.company_name }}</div>
            </div>
            <div class="item">
              <div class="label">手机号:</div>
              <div class="value">{{ info.pay_user_phone }}</div>
            </div>
            <div class="item">
              <div class="label">商品名称:</div>
              <div class="value">{{ info.good_name }}</div>
            </div>
            <div class="item">
              <div class="label">商品类型:</div>
              <div class="value">{{ info.model_type }}</div>
            </div>
            <div class="item">
              <div class="label">下单时间:</div>
              <div class="value">{{ info.created_time }}</div>
            </div>
          </div>
          <div class="info-col">
            <div class="item">
              <div class="label">付款时间:</div>
              <div class="value">{{ info.pay_time }}</div>
            </div>
            <div class="item">
              <div class="label">付款金额:</div>
              <div class="value">{{ (info.total_price - form.price).toFixed(2) }}</div>
            </div>
            <div class="item">
              <div class="label">订单总额:</div>
              <div class="value">
                {{ (info.total_price - form.price).toFixed(2) }}
                <el-button size="mini" type="text" @click="handleEditPrice"> <i class="el-icon-edit"></i>修改</el-button>
              </div>
              <!-- 修改金额 -->
              <div class="popup edit-price" v-if="showEditPrice">
                <div class="popup-title">修改订单价格</div>
                <div class="popup-content">
                  <div class="line">订单总额: {{ (info.total_price - form.price).toFixed(2) }}</div>
                  <div class="line">套餐总价: {{ info.total_price }}</div>
                  <div class="line red">
                    商家优惠: ￥
                    <el-form size="mini" :model="form" :rules="rules" ref="form" label-width="0" class="form">
                      <el-form-item prop="price">
                        <el-input v-model="form.price" placeholder="0" type="number"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <div class="popup-bottom">
                  <el-button size="mini" @click="handleCancel">取消</el-button>
                  <el-button size="mini" type="primary" @click="handleConfirm">确定</el-button>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="label">套餐总价:</div>
              <div class="value">{{ info.total_price }}</div>
            </div>
            <div class="item">
              <div class="label">商家优惠:</div>
              <div class="value">{{ form.price }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单进程 -->
      <div class="dialog-panel">
        <div class="dialog-panel-title">订单进程</div>
        <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
          <el-table-column align="center" header-align="center" label="时间" prop="process_time" width="150"></el-table-column>
          <el-table-column align="center" header-align="center" label="状态" prop="sts" show-overflow-tooltip width="100"> </el-table-column>
          <el-table-column align="center" header-align="center" label="进程" prop="desc" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <!-- 备注 -->
      <div class="dialog-panel">
        <div class="dialog-panel-title">备注</div>
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="remarks"> </el-input>
        <div class="panel-line flex-end">
          <el-button size="mini" type="primary" @click="handleSubmit" :disabled="remarks.length === 0">保存备注</el-button>
        </div>
      </div>
      <!-- 订单附件 -->
      <div class="dialog-panel" v-if="info.model_type === 4">
        <div class="dialog-panel-title">
          订单附件
          <el-button size="mini" type="text" @click="handleUpload" style="margin-left: 10px"><i class="el-icon-upload2"></i>上传附件</el-button>
          <!-- 上传附件 -->
          <div class="popup upload-file" v-if="showUploadFile">
            <div class="popup-title">上传附件</div>
            <div class="popup-content">
              <el-select v-model="fileType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <el-upload class="button-upload" :action="baseApi + 'drain/login/img_upload/'" :on-remove="handleRemove" :on-preview="handlePreview" :limit="1" :file-list="fileList" :before-upload="beforeUpload" :on-success="handleSuccess">
                <el-button size="mini" type="primary"><i class="el-icon-upload2"></i>上传文件</el-button>
                <div slot="tip" class="el-upload__tip">单个文件大小不超过5MB，支持扩展名： pdf、docx、jpg、png等</div>
              </el-upload>
            </div>
            <div class="popup-bottom">
              <el-button size="mini" @click="handleFileCancel">取消</el-button>
              <el-button size="mini" type="primary" @click="handleFileConfirm" :disabled="fileList.length === 0">确定</el-button>
            </div>
          </div>
        </div>
        <el-table :data="dataListFile" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="tableFile" style="width: 100%" v-loading="dataListLoadingFile">
          <el-table-column align="center" header-align="center" label="时间" prop="created_time" width="150"></el-table-column>
          <el-table-column align="center" header-align="center" label="附件类型" prop="file_type" show-overflow-tooltip width="100">
            <template slot-scope="scope">
              {{ getFileType(scope.row.file_type) }}
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" label="附件" prop="file_url" show-overflow-tooltip>
            <template slot-scope="scope">
              <a :href="scope.row.file_url" target="_blank" class="file-link">
                <i class="el-icon-paperclip"></i>
                {{ scope.row.file_name }}</a
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { apiOrderProcessArr, apiOrderRemark, apiOrderPriceEdit, apiOrderFileArr, apiOrderFileUp } from '@/api/quotationPay'
import { formatFormData } from '@/utils/index'
import { baseApi } from '@/config'

export default {
  props: {
    info: Object,
  },
  data() {
    var validate1 = (rule, value, callback) => {
      if (value > this.info.total_price) {
        callback(new Error('优惠金额不能大于套餐总价'))
      }
    }
    return {
      baseApi,
      fileList: [],
      active: 3,
      remarks: '',
      dataList: [],
      dataListLoading: false,
      dataListFile: [],
      dataListLoadingFile: false,
      form: {
        price: 0,
      },
      rules: {
        price: [
          { required: true, message: '请输入优惠金额', trigger: 'blur' },
          { validator: validate1, trigger: 'blur' },
        ],
      },
      showEditPrice: false,
      showUploadFile: false,
      fileType: 2,
      options: [
        { value: 2, label: '支付截图' },
        { value: 3, label: '沟通记录' },
        { value: 4, label: '方案文档' },
      ],
    }
  },
  computed: {},
  mounted() {
    this.init()
    this.getProcessList()
    this.getFileList()
  },
  methods: {
    init() {
      this.form.price = this.info.discount_price
    },
    // 获取订单进程
    getProcessList() {
      apiOrderProcessArr(formatFormData({ id_: this.info.id })).then((res) => {
        this.dataList = res.data || []
      })
    },
    // 获取附件列表
    getFileList() {
      apiOrderFileArr(formatFormData({ id_: this.info.id })).then((res) => {
        this.dataListFile = res.data || []
      })
    },
    // 保存
    handleSubmit() {
      apiOrderRemark(
        formatFormData({
          id_: this.info.id,
          remark: this.remarks,
        })
      ).then((res) => {})
    },
    // 修改金额
    handleEditPrice() {
      this.showEditPrice = true
    },
    // 取消修改金额
    handleCancel() {
      this.showEditPrice = false
    },
    // 确定修改金额
    handleConfirm() {
      apiOrderPriceEdit(
        formatFormData({
          id_: this.info.id,
          discount_price: this.form.price,
        })
      ).then((res) => {
        this.$message({
          message: '修改成功',
          type: 'success',
        })
        this.showEditPrice = false
        this.$emit('refresh')
      })
    },
    handleUpload() {
      this.showUploadFile = true
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    // 上传成功
    handleSuccess(res, file) {
      console.log(res, file)
      this.fileList.push(file)
    },
    // 取消上传附件
    handleFileCancel() {
      this.showUploadFile = false
    },
    // 确定上传附件
    handleFileConfirm() {
      console.log(this.fileList)
      apiOrderFileUp(
        formatFormData({
          id_: this.info.id,
          file_url: this.fileList[0].response.data.url,
          file_name: this.fileList[0].name,
          file_type: this.fileType,
        })
      ).then((res) => {
        this.$message({
          message: '上传成功',
          type: 'success',
        })
        this.showUploadFile = false
        this.getFileList()
        this.getProcessList()
        this.$emit('refresh')
      })
    },
    getFileType(value) {
      return this.options.find((item) => parseInt(item.value) === parseInt(value)).label
    },
  },
}
</script>
<style lang="scss" scoped>
.dialog-container {
  padding: 0 24px;
  padding-bottom: 200px;
}
.dialog-panel {
  margin-bottom: 20px;
}
.dialog-panel-title {
  margin-bottom: 20px;
  position: relative;
}
::v-deep .el-step__title {
  font-size: 12px;
  font-weight: normal;
}

.info {
  background: #efefef;
  padding: 20px 0;
  font-size: 14px;
  line-height: 2;
  color: #333333;
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .info-col {
    width: 50%;
    padding: 0 10px;
  }
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .label {
      width: 100px;
      flex-shrink: 0;
    }
    .value {
      width: calc(100% -100px);
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  }
}
.popup {
  width: 300px;
  position: absolute;
  left: -30px;
  top: 40px;
  z-index: 10;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 16px 24px;
  font-size: 14px;
  line-height: 2;
  color: #333333;
  &.upload-file {
    width: 400px;
    left: 20px;
    &:after {
      left: 60px;
    }
  }
  .line {
    display: flex;
  }
  .el-input {
    width: 150px;
  }
  .red {
    color: #f56c6c;
  }
  &:after {
    content: '';
    position: absolute;
    left: 180px;
    top: -20px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #ffffff;
  }
  .popup-title {
    font-weight: bold;
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
  }
  .popup-bottom {
    border-top: 1px solid #efefef;
    margin-top: 20px;
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.el-textarea {
  margin-bottom: 20px;
}
.el-form-item {
  margin: 0;
}
.button-upload {
  margin-top: 20px;
}
.file-link {
  color: #409eff;
  &:hover {
    text-decoration: underline;
  }
}
</style>
